<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		.body{
			width: 100%;
			height: 800px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			font-size: 20px;
			color: white;
		}
		.login{
			width: 600px;
			height: 400px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-top: 1px solid #7f8c8d;
		}
		td div{
			display: flex;
			width: 100%;
			height: 50px;
			justify-content: center;
			align-items: center;
		}
		button{
			width: 80px;
			height: 50px;
			background-color: #3498db;
			border: 0px;
			color: white;
			border-radius: 2px;
		}
		button:focus{
			outline: none;
		}
		button:hover{
			background-color: #0984e3;
			cursor: pointer;
		}
		.input-box{
			height: 28px;
			width: 200px;
			color: #dfe6e9;
			border-radius: 2px;
			border: 0px;
			background-color: rgba(100%,100%,100%,0.3);
		}
		input:focus{
			outline: none;
		}
	</style>
</head>
<body style="background-image: url(background5.jpg);background-repeat: no-repeat;background-size: cover;">
	<div class="body">
		<div style="text-align: left;width: 600px;">
			<span style="line-height: 40px;">用户登陆</span>
			<span style="color: #2980b9;font-size: 15px;"><a href="register.html" style="color: #2980b9;">用户注册</a></span>
		</div>
		<div class="login">
			<table>
				<tr>
					<td>用户名</td>
					<td>
						<div>
							<input id="username" type="text" name="" class="input-box">
						</div>
					</td>
				</tr>
				<tr>
					<td>密码</td>
					<td>
						<div>
							<input id="password" type="password" name="" class="input-box">
						</div>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<div>
							<input type="checkbox" name=""> 两周内自动登陆
						</div>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<div style="justify-content: space-around;">
							<button onclick="login()">登陆</button>
							<button>重置</button>
						</div>
					</td>
				</tr>
			</table>
		</div>
	</div>
	<script type="text/javascript">
		let username = document.getElementById("username");
		let password = document.getElementById("password");
		username.value = localStorage.getItem("username");
		password.value = localStorage.getItem("password");
		function login(){
			console.log("username:" + username.value);
			console.log("password:" + password.value);
			localStorage.setItem("username",username.value);
			localStorage.setItem("password",password.value);
		}
	</script>
</body>
</html>